<template>
  <div class="monitor-view">
    <div class="monitor-view-title">千岛湖农产品电商公共信息服务平台（演示版）</div>
    <div class="mapStyle-switch-wrap">
      <!--主题切换-->
      <mapswitch
        ref="mapswitch"
        @changeMapStyle="hanleChangeMapStyle"
      />
    </div>

    <!--<div class="mapStyle-state-wrap">-->
    <!--&lt;!&ndash;设备状态切换&ndash;&gt;-->
    <!--dev-toggle-->
    <!--</div>-->

    <div v-if="showBottom" class="card-data-wrap" style="display: inline-block;width: 600px;overflow: hidden;">
      <!--统计数据呈现-->
      <dev-statis
        :type0="type0"
        :type2="type2"
        :money="money"
        :order="order"
        :degree="degree"
        style="width: 700px;display: inline-block;"
        @showLists="hanleShowLists"
      />
    </div>
    <div v-if="showBottom"
         style="display: inline-block; width: 120px;position: absolute;bottom: 1rem;left: 1010px;color: #fff;z-index: 2;height: 72px">
      <div><img src="../../assets/img/close.png" height="25" width="25" style="cursor: pointer;"
                @click="showBottomContent"></div>
    </div>
    <div v-if="showBottom"
         style="display: inline-block; width: 100px;position: absolute;bottom: 1rem;left: 894px;color: #fff;z-index: 2;height: 72px">
      <div style="line-height: 72px;text-align: center;font-weight: 700;" class="data-style" @click="goDataTotal">数据统计
      </div>
    </div>
    <div v-if="!showBottom"
         style="display: inline-block; width: 120px;position: absolute;bottom: 1rem;left: 1010px;color: #fff;z-index: 2;height: 42px">
      <div><img src="../../assets/img/top.png" height="20" width="30" class="set-img-animate"
                @click="hideBottomContent"></div>
      <div class="showLeftInfo-see"
           style="width: 32px;margin-top: -4px;line-height: 13px;margin-left: 1px;cursor: pointer;"
           @click="hideBottomContent">展 开<br>查 看
      </div>
    </div>
    <div v-if="!showLeftInfo" class="showLeftInfo" @click="goOpenBtn">
      <img src="../../assets/img/left.png" height="30" width="20" class="showLeftInfo-img set-img-animate">
      <div class="showLeftInfo-see">
        展开<br>查看
      </div>

    </div>

    <div v-if="showLeftInfo" class="map-info-switch">
      <div class="switch-position">
        <div class="showLeftInfo-box" @click="goBackBtn">
          <img src="../../assets/img/close.png" height="25" width="25" class="showLeftInfo-box-img">
        </div>
        <!--药店查询-->
        <div class="shop-query">
          <div style="display: none;">
            <button class="year-btn">类 别</button>
            <el-select v-model="typeValue" placeholder="请选择类别" class="year-select" @change="typeChange(typeValue)">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="display: none;" class="year-box">
            <button class="year-btn">年 份</button>
            <el-select v-model="yearValue" placeholder="请选择年份" class="year-select">
              <el-option
                v-for="item in yearOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <div style="display: none;" class="year-box">
            <button class="year-btn">选 点</button>
            <el-input v-model="placeValue" placeholder="请输入关键字：(选定后搜索)" class="year-select"
                      id="searchPlaceIpt"></el-input>
          </div>

          <div class="year-box">
            <button class="year-btn">半 径</button>
            <el-input
              id="searchPlace"
              v-model="radius"
              placeholder="请输入半径"
              class="year-select"
              :disabled="!hasRadius"
              @keyup.enter.native="setRadius"
              @blur.stop="setRadius"
            />

            <div class="switch-radius">
              <el-switch
                v-model="hasRadius"
                @change="changeIsRadius"
              />
            </div>

          </div>

          <div class="list-input">
            <el-row class="demo-autocomplete">
              <el-col :span="12">
                <el-autocomplete
                  id="keyword"
                  v-model="selectValue"
                  class="inline-input query-input"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入电商或基地名称"
                  :clearable="true"
                  @select="handleSelect"
                  @focus.stop="focusSelect"
                  @keyup.enter.native="queryShop"
                />
              </el-col>
            </el-row>
            <button id="queryShop" class="query-shop" @click="queryShop">查 询</button>
          </div>

        </div>
        <!-- 药店列表-->
        <div class="shop-list-box">
          <div class="title">{{ showListsTitle }}</div>
          <!--范围内药品-->
          <ul class="shop-list-ul">
            <li v-for="(item, index) in shopList" :key="index" class="shop-item" @click="listsItemClick(item.id)">
              <div class="shop-img"><img :src="item.src" alt=""></div>
              <div class="shop-info">
                <div>店名：{{ item.name }}</div>
                <div>地址：{{ item.address }}</div>
                <div>与中心点距离：{{ item.dis.toFixed(2) }}km</div>
              </div>
            </li>
          </ul>
        </div>

        <div class="shop-list"/>
        <!--下属行政区查询-->
        <div class="input-card area-card">
          <h4>下属乡镇查询</h4>
          <div class="input-item" style="display: none;">
            <div class="input-item-prepend"><span class="input-item-text" style="width: 50px;">区县</span></div>
            <select id="district" v-model="cityid" style="width:100px;" @change="searchArea(cityid)">
              <option value="">所有区县</option>
              <!--// eslint-disable-next-line vue/require-v-for-key-->
              <option v-for="(item,key) in cityData" :key="key" :value="item.adcode">{{ item.name }}</option>
            </select>
          </div>
          <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text" style="width: 50px;">街道</span></div>
            <select id="street" v-model="streetname" style="width:100px" @change="searchStreet(streetname)">
              <option value="">所有乡镇</option>
              <option v-for="(item,key) in streetData" :key="key" :value="item.name">{{ item.name }}</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="monitor-map">

      <div id="map-container"/>

      <!-- 图例 -->
      <el-button
        type="primary"
        title="重置"
        class="refresh-btn"
        icon="el-icon-refresh"
        circle
        @click="refreshFun"
      />

      <div class="input-card bottom-example">
        <div id="map-features">
          <div class="input-item">
            <input
              type="checkbox"
              name="mapStyle"
              value="bg"
              checked
              class="mapStyle"
              @click.stop="setMapFeatures"
            >
            <span class="input-text">区域面</span>
          </div>
          <div class="input-item">
            <input
              type="checkbox"
              name="mapStyle"
              value="road"
              checked
              class="mapStyle"
              @click.stop="setMapFeatures"
            >
            <span class="input-text">道路</span>
          </div>
          <div class="input-item">
            <input
              type="checkbox"
              name="mapStyle"
              value="building"
              checked
              class="mapStyle"
              @click.stop="setMapFeatures"
            >
            <span class="input-text">建筑物</span>
          </div>
          <div class="input-item">
            <input
              type="checkbox"
              name="mapStyle"
              value="point"
              checked
              class="mapStyle"
              @click.stop="setMapFeatures"
            >
            <span class="input-text">标注</span>
          </div>
        </div>
        <div class="exampleList">
          <div>
            <img src="../../assets/img/map/mass6.png" class="exampleList-img" alt="">
            <span>销售电商<i class="exampleList-num">{{ type0 }}家</i></span>
          </div>
          <div>
            <img src="../../assets/img/map/mass1.png" class="exampleList-img" alt="">
            <span>重点基地<i class="exampleList-num">{{ type2 }}家</i></span>
          </div>
          <div>
            <img src="../../assets/img/map/mass0.png" class="exampleList-img" alt="">
            <span>重点商家<i class="exampleList-num">{{ type1 }}家</i></span>
          </div>
        </div>
      </div>

      <!--药店详细信息窗口-->
      <el-dialog :title="getPagesInfo.name+' - 详情'" :visible.sync="outerVisible" width="80%" top="10vh">
        <storeDetail :get-pages-info="getPagesInfo"/>
      </el-dialog>

    </div>

  </div>
</template>

<script>

  import AMap from 'AMap'
  import axios from 'axios'

  import storeDetail from '@/views/store/storeDetail.vue'
  import devStatis from './map/devStatis.vue'
  import mapswitch from './map/mapSwitch.vue'

  export default {
    name: 'MapMonitor',
    components: {
      mapswitch,
      devStatis,
      'storeDetail': storeDetail // 变成组件 storeDetail
    },

    data: function () {
      return {
        mapStyle: 'amap://styles/normal',
        // amap://styles/5661c95c59bf12d285dfb1d27044e23c//正常
        // amap://styles/061231ba2064bc660644432c551e9700//夜间
        // mapStyle: 'amap://styles/5661c95c59bf12d285dfb1d27044e23c',
        showLeftInfo: false,
        showBottom: true,
        shopList: [],
        // -------------
        switch_model: true,
        mapObj: null,
        boundary: null, // 边界obj
        heatmap: null, // 热力图obj
        heatmapData: null, // 热力图数据
        polygonLine: null, // 边界线
        infoWindow: null,
        labels: [], // label集合
        circle: null,
        circleEditor: null,
        markers: [],
        mass: null, // 海量点
        massMarker: null, // 海量点上的名称
        resData: [], // 药店等机构所有数据
        houseData: [], // 小区人口所有数据
        Perpopu: 0, // 常驻人口
        Floatpopu: 0, // 流动人口
        selectValue: '', // 查询的药店或机构的值
        type0: 0, //
        type1: 0, //
        type2: 0, //
        money: 0,//钱
        order: 0,//订单
        degree: 0,//满意度
        type0Data: [], // 药店
        type1Data: [], // 三甲医院
        type2Data: [], // 普通医疗机构
        yearOptions: [], // 年份
        yearValue: '',
        typeOptions: [{value: 'all', label: '所有'}, {value: '0', label: '药店'}, {value: '1', label: '三甲医院'}, {
          value: '2',
          label: '普通医疗机构'
        }, {value: '3', label: '已取消机构'}],
        typeValue: 'all',
        outerVisible: false, // 是否显示药店详情
        getPagesInfo: {}, // 传递的详情数据
        cityData: [], // 区域数据
        cityid: '', // 城市编码
        streetData: [], // 街道数据
        streetname: '', // 街道名称
        areaMarker: null,
        placeValue: '', // 地点名称
        showListsTitle: '', // 列表标题
        radius: 500,
        hasRadius: true// 是否开启半径

      }
    },

    computed: {
      centerPos: function () {
        return this.$store.state.mapCenterPos
      }
    },

    watch: {
      // a computed getter
      // mapStyle: function () {
      //   this.mapObj.setMapStyle(this.mapStyle)
      //   return
      // }
    },

    beforeMount() {
      // 初始化配置参数
    },

    destroyed() {
      // 销毁的时候
    },

    mounted() {
      console.log('mounted.....')
      this.initMap()
      this.yearFun()
      this.areaDataFun()
      this.searchPlace()
    },

    methods: {

      initMap() {
        var _this = this
        _this.mapObj = new AMap.Map('map-container', {
          zoom: 10,
          center: [118.844276, 29.604177],
          mapStyle: _this.mapStyle
        })

        _this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -10)})

        if (_this.mapObj) {
          _this.completeEventHandler()
        } else {
          AMap.event.addListener(_this.mapObj, 'complete', _this.completeEventHandler)
        }
      },

      /**
       * 地图构造完成后
       */
      completeEventHandler() {
        var _this = this
        console.log('completeEventHandler')

        // map点击事件
        _this.mapObj.on('click', function (e) {
          _this.infoWindow.close()
          _this.addCircleFun([e.lnglat.Q, e.lnglat.P])
        })

        _this.placeArea('淳安县')

        // 图层切换，地图缩放，路况（路网等功能）
        _this.mapObj.plugin(['AMap.ToolBar', 'AMap.MapType'], function () {
          // _this.mapObj.addControl(new AMap.ToolBar())
          _this.mapObj.addControl(new AMap.MapType({showTraffic: false, showRoad: false}))
        })

        // 设置药店、医疗结构点位 -- 海量点
        // axios.get('../static/json/map.json').then((res) => {
          axios.get('http://drug.ysmove.com/qdh/dist/static/json/map.json').then((res) => {
          // 用axios的方法引入地址
          if (res.status == 200) {
            res.data.forEach(item => {
              item.lnglat = item.pos;
              item.style = item.type;
              item.value = String(item.name);
              item.degree = Number(item.degree.replace('%', ''));

              // item.money = 12
              // item.order = 260
              // item.degree = 54
              if (item.src == "") {
                item.src = 'http://drug.ysmove.com/img/pic.jpg';
              }

              item.dis = 0
              if (item.type == 0) {
                item.opendata = "08:00 - 22:00"
                item.icon = 'http://drug.ysmove.com/img/mass6.png'
              } else if (item.type == 1) {
                // item.icon = 'http://drug.ysmove.com/img/mass4.png'
                item.opendata = "08:00 - 22:00"
                item.icon = 'http://drug.ysmove.com/img/mass0.png'
              } else if (item.type == 2) {
                item.opendata = "08:00 - 17:00"
                item.icon = 'https://a.amap.com/jsapi_demos/static/images/mass1.png'
              }
            })

            _this.resData = res.data

            // 统计个数
            _this.countNum(res.data)

            _this.showMarker(res.data)
          }
        })

        // 热力图数据
        // axios.get('../static/json/hotpopu.json').then((res) => {
        //   // 用axios的方法引入地址
        //   if (res.status == 200) {
        //     _this.heatmapData = res.data
        //   }
        // })

        // 流动人口数据
        // axios.get('../static/json/popu.json').then((res) => {
        //   // 用axios的方法引入地址
        //   if (res.status == 200) {
        //     _this.Perpopu = 0
        //     _this.Floatpopu = 0
        //
        //     _this.houseData = res.data
        //     _this.houseData.forEach(function (item, index) {
        //       _this.Perpopu += item.Perpopu
        //       _this.Floatpopu += item.Floatpopu
        //     })
        //   }
        // })

        console.log('completeEventHandler end')
      },

      // 区域选择
      placeArea(stringName) {
        var _this = this
        // 框定宁波市地区

        _this.boundary = new AMap.DistrictSearch({
          extensions: 'all',
          subdistrict: 0
        }).search(stringName, function (status, result) {
          // 外多边形坐标数组和内多边形坐标数组
          var outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true)
          ]
          var holes = result.districtList[0].boundaries

          var pathArray = [
            outer
          ]
          pathArray.push.apply(pathArray, holes)

          if (_this.polygonLine != null) {
            _this.mapObj.remove(_this.polygonLine)
          }

          _this.polygonLine = new AMap.Polygon({
            pathL: pathArray,
            // 线条颜色，使用16进制颜色代码赋值。默认值为#006600
            strokeColor: 'rgb(20,164,173)',
            strokeWeight: 4,
            // 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            strokeOpacity: 0.5,
            // 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
            fillColor: 'rgba(0,0,0,0.7)',
            // 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            fillOpacity: 1,
            // 轮廓线样式，实线:solid，虚线:dashed
            strokeStyle: 'solid',
            /* 勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
                ie9+浏览器有效 取值：
                实线：[0,0,0]
                虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
                点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
                线和10个像素的空白 （如此反复）组成的虚线*/
            strokeDasharray: [10, 2, 10]
          })
          _this.polygonLine.setPath(pathArray)

          _this.mapObj.add(_this.polygonLine)

          // 层级自动化
          // _this.mapObj.setFeatures(_this.polygonLine);//无效
          if (stringName == '淳安县') {
            _this.showMarker(_this.resData)
            _this.countNum(_this.resData)

            _this.mapObj.setZoomAndCenter(10, [118.844276, 29.604177])
          } else {
            // 获取某个区内的药店数量
            var areaResData = _this.resData.filter(function (item) {
              return item.adcode == _this.cityid
            })
            _this.showMarker(areaResData)
            _this.countNum(areaResData)

            // 获取中心店
            var areaData = _this.cityData.filter(function (city) {
              return city.name == stringName
            })

            var centerArr = areaData[0].center.split(',')

            var num = 10

            // 层级和中心店各个区县自定义
            // 江北区
            if (areaData[0].adcode == 330205) {
              num = 12
              centerArr = [121.527, 29.9435]
            }
            // 北仑
            else if (areaData[0].adcode == 330206) {
              num = 11
            }
            // 镇海
            else if (areaData[0].adcode == 330211) {
              num = 12
              centerArr = [121.612, 29.9908]
            }
            // 海曙
            else if (areaData[0].adcode == 330203) {
              num = 11
              centerArr = [121.297, 29.8463]
            }
            // 鄞州
            else if (areaData[0].adcode == 330212) {
              num = 11
              centerArr = [121.702, 29.7099]
            }

            _this.mapObj.setZoomAndCenter(num, centerArr)
          }
        })
      },

      // 海量点 不兼容 setFitView ,所以使用marker方式
      showMass(data) {
        var _this = this
        _this.mapObj.remove(_this.mass)
        _this.mapObj.remove(_this.massMarker)

        // 海量点 -- 样式
        var style = [
          {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: 'http://drug.ysmove.com/img/mass4.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: 'http://drug.ysmove.com/img/mass6.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          }
        ]

        _this.mass = new AMap.MassMarks(data, {
          opacity: 0.8,
          zIndex: 111,
          cursor: 'pointer',
          style: style
        })

        _this.massMarker = new AMap.Marker({content: ' ', map: _this.mapObj})

        _this.mass.on('mouseover', function (e) {
          _this.massMarker.setPosition(e.data.lnglat)
          _this.massMarker.setLabel({content: e.data.name})
        })
        // 标记点 点击事件
        _this.mass.on('click', function (e) {
          _this.mapObj.setZoomAndCenter(15, [e.data.lnglat.Q, e.data.lnglat.P]) // 设置地图中心点
        })
        _this.mass.setMap(_this.mapObj)
        _this.mapObj.setFitView([_this.mass])
      },
      // 多个标记点
      showMarker(data) {
        var _this = this

        // 清空信息窗口和之前加载的点位
        _this.infoWindow.close()
        _this.mapObj.remove(_this.markers)
        _this.markers = []// 先清空点位数组

        if (_this.areaMarker != null) {
          _this.mapObj.remove(_this.areaMarker)// 清楚区域选择的标记
        }

        data.forEach(function (item) {

          if (item.type == 1) {
            var marker = new AMap.Marker({
              map: _this.mapObj,
              content: `<div><img width="24" height="24" src="${item.icon}" alt=""></div>`,
              position: item.pos,
              offset: new AMap.Pixel(-6, -6)
            })
          } else {
            var marker = new AMap.Marker({
              map: _this.mapObj,
              content: `<div><img width="12" height="12" src="${item.icon}" alt=""></div>`,
              position: item.pos,
              offset: new AMap.Pixel(-6, -6)
            })
          }

          // 信息窗口
          var str = `<div class="window-style-open">
                      <div class="box-img"><img src="${item.src}" alt=""></div>
                      <div class="box-info">
                       <div class="info-title"><span>地址: </span>${item.address}</div>
                       <div class="info-title"><span>电话: </span>${item.tel}</div>
                       <div class="info-title"><a id="storeDetail" data-id="${item.id}">查看详情</a></div>
                      </div>
                   </div> `
          marker.content = str

          marker.id = item.id

          // 当点位小于3个时，添加文字标识
          if (data.length < 3) {
            // 名字标识
            marker.setLabel({
              offset: new AMap.Pixel(12, -5), // 设置文本标注偏移量
              content: "<div class='amap-marker-label'><div class='title'>" + item.name + '</div></div>', // 设置文本标注内容
              direction: 'bottom-right' // 设置文本标注方位
            })
          } else {
            marker.on('mouseover', function (e) {
              _this.markers.forEach(function (item2) {
                item2.setLabel(null)
              })

              // 名字标识
              marker.setLabel({
                offset: new AMap.Pixel(12, -5), // 设置文本标注偏移量
                content: "<div class='amap-marker-label'><div class='title'>" + item.name + '</div></div>', // 设置文本标注内容
                direction: 'bottom-right' // 设置文本标注方位
              })
            })
          }

          // 点位集合
          _this.markers.push(marker)

          // 点位点击事件
          marker.on('click', function (e) {
            // 显示信息窗口
            _this.infoWindow.setContent(e.target.content)
            _this.infoWindow.open(_this.mapObj, e.target.getPosition())
            setTimeout(function () {
              _this.openWindowEvent()
            }, 300)

            // 添加圆
            _this.addCircleFun(e.target.getPosition())
          })
        })

        _this.mapObj.add(_this.markers)

        // 当只有一条数据时默认 打开信息窗口
        if (data.length == 1) {
          _this.infoWindow.setContent(_this.markers[0].content)
          _this.infoWindow.open(_this.mapObj, data[0].pos)
          setTimeout(function () {
            _this.openWindowEvent()
          }, 300)

          // 添加圆
          _this.addCircleFun(data[0].pos)
        } else {
          if (_this.circle != null) {
            _this.mapObj.remove(_this.circle)
          }
          if (_this.circleEditor != null) {
            _this.circleEditor.close()
          }
          // _this.mapObj.setFitView(_this.markers)
        }
      },
      // 添加圆
      addCircleFun(arr) {
        var _this = this

        // 地图上移除所有圆
        if (_this.circle != null) {
          _this.mapObj.remove(_this.circle)
        }
        // 圆编辑模式
        if (_this.circleEditor != null) {
          _this.circleEditor.close()
        }

        // 地图上添加圆
        _this.circle = new AMap.Circle({
          center: arr,
          radius: _this.radius, // 半径
          borderWeight: 3,
          strokeColor: '#00796b',
          strokeWeight: 6,
          strokeStyle: 'dashed',
          strokeDasharray: [10, 10],
          // 线样式还支持 'dashed'
          fillColor: '#00bfa5',
          fillOpacity: 0.4, // 填充透明度
          zIndex: 10,
          cursor: 'pointer'
        })

        // 判断是否开启有半径
        if (_this.hasRadius) {
          _this.showCircle()
        }

        _this.circleCountNumFun(arr, _this.radius)

        // 缩放地图到合适的视野级别
        _this.mapObj.setFitView([_this.circle])
      },
      // 出现圆
      showCircle() {
        var _this = this

        // 给圆内绑定点击事件
        _this.circle.on('click', function (e) {
          _this.addCircleFun([e.lnglat.Q, e.lnglat.P])
        })

        // 地图上添加圆
        _this.circle.setMap(_this.mapObj)

        _this.circleEditor = new AMap.CircleEditor(_this.mapObj, _this.circle)
        _this.circleEditor.open()

        // 圆 移动和 切换大小事件
        _this.circleEditor.on('move', function (e) {
          var radius = e.target.Je.radius
          var pos = [e.target.Je.center.Q, e.target.Je.center.P]
          _this.circleCountNumFun(pos, radius)
        })

        _this.circleEditor.on('adjust', function (e) {
          var radius = e.target.Je.radius
          var pos = [e.target.Je.center.Q, e.target.Je.center.P]
          _this.circleCountNumFun(pos, radius)
        })
      },

      editOpen() {
        this.circleEditor.open() // 打开圆形编辑器
      },

      editClose() {
        this.circleEditor.close() // 打开圆形编辑器
      },

      // input联想查询
      querySearch(queryString, cb) {

        var _this = this;
        var resData = _this.resData;

        var results = queryString ? resData.filter(_this.createFilter(queryString)) : resData;
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (resData) => {
          return (resData.value.indexOf(queryString) > -1)
        }
      },
      // 点击选项
      handleSelect(item) {
        var _this = this

        _this.selectValue = item.name

        _this.queryShop(item.name)
      },
      // 搜索药店获取焦点
      focusSelect() {

        // if (document.getElementsByClassName('el-autocomplete-suggestion')[0].style.display == "none") {
        //   document.getElementsByClassName('el-autocomplete-suggestion')[0].style.display = 'block';
        // }

      },
      // 搜索药店失去焦点
      blurSelect() {
        // setTimeout(function () {
        //   document.getElementsByClassName('el-autocomplete-suggestion')[0].style.display = 'none';
        // }, 100)
      },

      // 查询事件
      queryShop() {
        var _this = this

        var result = []

        _this.resData.forEach(function (item, index) {
          if (item.value.includes(_this.selectValue)) {
            result.push(item)
          }
        })

        // 统计个数
        _this.countNum(result)

        // 加载搜索的点
        _this.showMarker(result)
      },

      // 图例 设置地图显示要素
      setMapFeatures() {
        var _this = this

        const checkboxElements = document.getElementsByClassName('mapStyle')
        const features = []
        for (var i = 0; i < checkboxElements.length; i++) {
          if (checkboxElements[i].checked == true) {
            features.push(checkboxElements[i].value)
          }
        }
        _this.mapObj.setFeatures(features)
      },

      // 统计个数
      countNum(data) {
        var _this = this

        _this.type0 = 0
        _this.type1 = 0
        _this.type2 = 0
        _this.money = 0
        _this.order = 0
        _this.degree = 0
        _this.type0Data = []
        _this.type1Data = []
        _this.type2Data = []

        data.forEach(item => {
          _this.money += item.money;
          _this.order += item.order;
          _this.degree += item.degree;
          if (item.type == 0) {
            _this.type0++
            _this.type0Data.push(item)
          } else if (item.type == 1) {
            _this.type1++
            _this.type1Data.push(item)
          } else if (item.type == 2) {
            _this.type2++
            _this.type2Data.push(item)
          }
        })
        _this.money = _this.money.toFixed(2);
        _this.degree = (_this.degree / data.length).toFixed(1);


      },

      // 计算雷达圆内的数量
      circleCountNumFun(pos, radius) {
        var _this = this

        // 计算药店、三甲医院、普通医疗机构数量
        _this.type0 = 0
        _this.type1 = 0
        _this.type2 = 0
        _this.money = 0
        _this.order = 0
        _this.degree = 0
        _this.type0Data = []
        _this.type1Data = []
        _this.type2Data = []

        var num = 0;

        _this.resData.forEach(function (item, index) {
          var flag = _this.distanceFun(pos, item.pos, radius)
          var dis = _this.getDistanceFun(pos, item.pos)

          item.dis = dis

          if (flag) {
            num++;
            _this.money += item.money;
            _this.order += item.order;
            _this.degree += item.degree;
            if (item.type == 0) {
              _this.type0++
              _this.type0Data.push(item)
            } else if (item.type == 1) {
              _this.type1++
              _this.type1Data.push(item)
            } else if (item.type == 2) {
              _this.type2++
              _this.type2Data.push(item)
            }
          }
        })

        if (_this.degree == 0) {
          _this.degree = 0.0;
        } else {
          _this.degree = (_this.degree / num).toFixed(1);
        }

        _this.money = _this.money.toFixed(2);


        // 统计人口数据
        _this.Perpopu = 0
        _this.Floatpopu = 0

        _this.houseData.forEach(function (item, index) {
          var arr = [item.lng, item.lat]
          var flag = _this.distanceFun(pos, arr, radius)
          if (flag) {
            _this.Perpopu += item.Perpopu
            _this.Floatpopu += item.Floatpopu
          }
        })

        if (_this.circle != null) {
          _this.showListsTitle = '圈内所有销售电商和重点基地'
          var arr1 = _this.type0Data.concat(_this.type1Data)
          var arr2 = arr1.concat(_this.type2Data)
          _this.shopList = arr2
        }
      },

      // 年份
      yearFun() {
        var _this = this
        var nowYear = new Date().getFullYear()
        _this.yearValue = nowYear
        for (var i = nowYear; i > nowYear - 10; i--) {
          _this.yearOptions.push({value: i, label: i})
        }
      },

      // 打开弹窗
      openWindowEvent() {
        var _this = this
        var obj = document.getElementById('storeDetail')
        obj.addEventListener('click', function () {
          _this.outerVisible = true

          var storeid = obj.getAttribute('data-id')
          _this.resData.forEach(function (item) {
            if (item.id == storeid) {
              _this.getPagesInfo = item
              return false
            }
          })
        })
      },

      // 重置按钮
      refreshFun() {
        var _this = this

        // 清空map
        if (_this.heatmap != null) {
          _this.mapObj.remove(_this.heatmap)
        }
        _this.mapObj.clearMap()

        _this.showMarker(_this.resData)
        _this.countNum(_this.resData)
        _this.placeArea('淳安县')

        _this.heatmap = null
        _this.typeValue = 'all'
        _this.yearValue = new Date().getFullYear()
        _this.placeValue = ''
        _this.shopList = []
        _this.showListsTitle = ''
        _this.selectValue = ''
        _this.cityid = ''
        _this.streetData = [];
        _this.streetname = '';
        _this.radius = 500;
        _this.circle = null;
        _this.hasRadius = true;
        // _this.mapStyle = 'amap://styles/5661c95c59bf12d285dfb1d27044e23c'
        _this.mapStyle = 'normal'
        _this.mapObj.setMapStyle(_this.mapStyle)
        _this.$refs.mapswitch.switch_model = false
        _this.$refs.mapswitch.switch_hot = false

        // 地图标注默认全选
        const arr = document.getElementsByClassName('mapStyle')
        for (let i = 0; i < arr.length; i++) {
          arr[i].checked = 'checked'
        }
        _this.setMapFeatures()

        // 流动人口数量重置
        _this.Perpopu = 0
        _this.Floatpopu = 0
        _this.houseData.forEach(function (item, index) {
          _this.Perpopu += item.Perpopu
          _this.Floatpopu += item.Floatpopu
        })
      },

      // 区域函数
      areaDataFun() {
        var _this = this
        // axios.get('../static/json/area.json').then((res) => {
          axios.get('http://drug.ysmove.com/qdh/dist/static/json/area.json').then((res) => {
          if (res.status == 200) {
            _this.streetData = res.data.districts[0].districts
          }
        })
      },
      // 查询区域
      searchArea(e) {
        var _this = this

        if (e == '') {
          _this.streetData = []
        } else {
          var streetData = _this.cityData.filter(function (city) {
            return city.adcode == e
          })
          _this.streetData = streetData[0].districts
        }

        // _this.addAreaMarker(streetData[0].center.split(','), streetData[0].name)

        // 区域框定到县区
        if (e == '') {
          _this.placeArea('淳安县')
        } else {
          _this.placeArea(streetData[0].name)
        }
      },
      // 查询街道
      searchStreet(name) {
        var _this = this

        if (name == "") {
          _this.placeArea('淳安县')
        } else {
          var streetData = _this.streetData.filter(function (street) {
            return street.name == name
          })
          _this.addAreaMarker(streetData[0].center.split(','), name)
        }

      },
      // 添加选择行政区划的marker
      addAreaMarker(arr, name) {
        var _this = this

        // 清空其他信息
        if (_this.infoWindow != null) {
          _this.infoWindow.close()
        }

        if (_this.circle != null) {
          _this.mapObj.remove(_this.circle)
        }
        if (_this.circleEditor != null) {
          _this.circleEditor.close()
        }

        if (_this.areaMarker != null) {
          _this.mapObj.remove(_this.areaMarker)
        }

        _this.areaMarker = new AMap.Marker({
          content: `<div><img width="13" height="17" src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" alt=""></div>`,
          position: arr,
          offset: new AMap.Pixel(-13, -30)
        })
        _this.areaMarker.setLabel({
          offset: new AMap.Pixel(30, 30), // 设置文本标注偏移量
          content: "<div class='info'>" + name + '</div>', // 设置文本标注内容
          direction: 'right' // 设置文本标注方位
        })
        _this.areaMarker.setMap(_this.mapObj)
        // _this.mapObj.setFitView([_this.areaMarker])
        _this.mapObj.setZoomAndCenter(12, arr)
      },

      // 类别切换
      typeChange(typeValue) {
        var _this = this

        if (typeValue == 'all') {
          // 统计个数
          _this.countNum(_this.resData)

          // 加载搜索的点
          _this.showMarker(_this.resData)
        } else {
          var result = _this.resData.filter(function (item) {
            return item.type == typeValue
          })

          // 统计个数
          _this.countNum(result)

          // 加载搜索的点
          _this.showMarker(result)
        }
      },

      // 查询地点
      searchPlace() {
        var _this = this;

        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {

          var autoOptions = {
            // 城市，默认全国
            city: '杭州',
            // 使用联想输入的input的id
            input: '#searchPlaceIpt'
          }
          var autocomplete = new AMap.Autocomplete(autoOptions)

          var placeSearch = new AMap.PlaceSearch({
            city: '杭州',
            map: _this.mapObj
          })
          AMap.event.addListener(autocomplete, 'select', function (e) {
            var lat = e.poi.location.lat
            var lng = e.poi.location.lng

            _this.placeValue = e.poi.name

            _this.addCircleFun([lng, lat])

            // TODO 针对选中的poi实现自己的功能
            // placeSearch.setCity(e.poi.adcode);
            // placeSearch.search(e.poi.name);
          })
        })
      },

      // 测距函数
      distanceFun(arr1, arr2, dis) {
        var flag = false
        var p1 = [121.41140100000001, 29.656963]
        var p2 = [121.411401, 29.656963]
        // 返回 p1 到 p2 间的地面距离，单位：米
        var dis2 = AMap.GeometryUtil.distance(arr1, arr2)

        if (dis2 < dis) {
          flag = true
        } else {
          flag = false
        }

        return flag
      },

      // 获取测距函数
      getDistanceFun(arr1, arr2) {
        var dis2 = 0
        var p1 = [121.41140100000001, 29.656963]
        var p2 = [121.411401, 29.656963]
        // 返回 p1 到 p2 间的地面距离，单位：km
        dis2 = Number(AMap.GeometryUtil.distance(arr1, arr2)) / 1000

        return dis2
      },

      handleChangeDevState(idx) {
        // 改变设备状态过滤  idx 100:全部  1在线  0离线
        // console.log(idx);
        this.deviceState = idx
      },

      // 切换页面模式
      hanleChangeMapStyle(type) {
        var _this = this

        if (type) {
          _this.mapStyle = 'amap://styles/blue'
        } else {
          _this.mapStyle = 'amap://styles/normal'
        }

        _this.mapObj.setMapStyle(_this.mapStyle)
      },

      // 切换热力图
      hanleChangeHot(type) {
        var _this = this

        if (type) {
          _this.mapObj.remove(_this.markers)

          _this.mapObj.plugin(['AMap.Heatmap'], function () {
            // 初始化heatmap对象
            _this.heatmap = new AMap.Heatmap(_this.mapObj, {
              radius: 80, // 给定半径
              opacity: [0, 0.8]
            })
            // 设置数据集：该数据为北京部分“公园”数据
            _this.heatmap.setDataSet({
              data: _this.heatmapData
            })
          })

          _this.heatmap.show()
        } else {
          _this.heatmap.hide()
          _this.refreshFun()
        }
      },

      hanleShowLists(num) {
        var _this = this
        if (num == 0) {
          _this.showListsTitle = '该范围内销售电商列表'
          _this.shopList = _this.type0Data
        } else if (num == 1) {
          _this.showListsTitle = '该范围内三甲医院列表'
          _this.shopList = _this.type1Data
        } else if (num == 2) {
          _this.showListsTitle = '该范围内重点基地列表'
          _this.shopList = _this.type2Data
        }
      },

      listsItemClick(id) {
        var _this = this

        var markers = _this.markers.filter(function (item) {
          return item.id == id
        })

        _this.infoWindow.setContent(markers[0].content)
        _this.infoWindow.open(_this.mapObj, [markers[0].Je.position.Q, markers[0].Je.position.P])
        setTimeout(function () {
          _this.openWindowEvent()
        }, 300)

        // 判断有没有圆
        if (_this.circle == null) {
          _this.mapObj.setZoomAndCenter(12, [markers[0].Je.position.Q, markers[0].Je.position.P])
        }

        // 添加圆
        // _this.addCircleFun([markers[0].Je.position.Q, markers[0].Je.position.P]);
      },

      // 收起
      goBackBtn() {
        this.showLeftInfo = false
      },

      // 展开
      goOpenBtn() {
        this.showLeftInfo = true
      },
      // showBottomContent
      showBottomContent() {
        this.showBottom = false
      },
      hideBottomContent() {
        this.showBottom = true
      },

      goDataTotal() {
        window.open('http://drug.ysmove.com/qdh/screen/', '_blank')
      },

      // 设置圆编辑器半径
      setRadius() {
        var _this = this
        _this.radius = Number(_this.radius)

        if (_this.circle != null) {
          _this.circle.setRadius(_this.radius)
          _this.mapObj.setFitView([_this.circle])

          // 重新计算圆内的数据
          var arr = [_this.circle.Je.center.Q, _this.circle.Je.center.P]
          _this.circleCountNumFun(arr, _this.radius)
        }
      },

      // 切换是否有半径
      changeIsRadius() {
        var _this = this
        if (!_this.hasRadius) {
          if (_this.circle != null) {
            _this.mapObj.remove(_this.circle)
          }
          if (_this.circleEditor != null) {
            _this.circleEditor.close()
          }
        } else {
          _this.showCircle()
        }
      }

    }

  }

</script>

<style lang="scss" type="text/scss" scope>
  $zIndex: 996;
  $zIndex2: 999;

  .amap-logo {
    display: none !important;
  }

  .amap-copyright {
    opacity: 0;
  }

  .map-info-switch {

    .el-input--medium .el-input__inner {
      height: 30px !important;
      line-height: 30px !important;
      width: 166px !important;
    }

    .year-btn, .query-shop {
      height: 30px !important;
      line-height: 30px !important;
    }

    .el-input--medium .el-input__icon {
      line-height: 26px !important;
    }

  }

  .monitor-view {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    //background: url('../../assets/imgs/bg-1920-02.jpg');
    //background-size:cover;
    background: #f0f0f0;
    padding: 0px;
  }

  .monitor-map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .monitor-view-title {
    background: url("../../assets/img/titbg.png") no-repeat center center/100% 180%;
    background-position-y: -5px;
    /* width: 636px; */
    height: 70px;
    position: absolute;
    margin: 0;
    top: 0px;
    left: 50%;
    margin-left: -307px;
    text-align: center;
    line-height: 55px;
    z-index: 996;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    padding: 0 55px;
    //text-shadow: 0 2px 2px rgba(0,0,0,0.3);
  }

  .mapStyle-switch-wrap {
    position: absolute;
    right: 80px;
    top: 16px;
    z-index: $zIndex;
  }

  .mapStyle-state-wrap {
    position: absolute;
    left: 20px;
    top: 15px;
    z-index: $zIndex;
  }

  .card-data-wrap {
    position: absolute;
    bottom: 1rem;
    left: 300px;
    right: 25px;
    z-index: $zIndex;
    /*height: 85px;*/
  }

  .device-monitor-list {
    position: absolute;
    top: 60px;
    left: 21px;
    bottom: 140px;
    z-index: $zIndex;
  }

  .play-history-list {
    position: absolute;
    top: 60px;
    right: 21px;
    bottom: 140px;
    z-index: $zIndex;
  }

  //年份select
  .year-btn {
    border: 1px solid #ced4da;
    border-radius: 0px;
    display: inline-block;
    width: 50px;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow: visible;
    text-transform: none;
    height: 36px;
    outline: none;
    vertical-align: top;
  }

  .year-select {
    width: 160px;
    margin-left: -3px;
    height: 28px;

    input {
      border-radius: 0;
      outline: none;
    }
  }

  .amap-info-close {
    position: absolute;
    right: 5px;
    _right: 12px;
    top: 5px;
    color: #c3c3c3;
    text-decoration: none;
    font: bold 16px/14px Tahoma, Verdana, sans-serif;
    width: 19px;
    height: 18px;
    text-align: center;
    line-height: 20px;
  }

  .el-vue-search-box-container {
    position: absolute !important;
    box-shadow: 4px 0px 13px 3px #999;
    height: 36px !important;
    line-height: 36px !important;
    top: 14px !important;
  }

  .search-btn {
    width: 70px !important;
    text-align: center;
    border-left: 1px solid #ddd;
    font-size: 14px;
  }

  .amap-text {
    background: #409eff;
    color: #fff;
  }

  .map-container,
  #map-container {
    position: relative;
    padding: 0px;
    min-height: calc(100vh - 0px);
    overflow-y: hidden;
  }

  .amap-demo {
    height: 100%;
  }

  .search-box {
    position: absolute;
    top: 25px;
    left: 20px;
  }

  .amap-page-container {
    position: relative;
    height: 600px;
    width: 100%;
  }

  .marker-window-wrap {
    width: 200px;
    /*height:150px;*/
    margin: -15px -18px 0px;

    .title {
      margin: -10px -18px 0px;
      padding: 5px 20px;
      border-bottom: 1px solid #ddd;
      background: #eeeeee;
      font-size: 13px;
      font-weight: bold;
    }

    .body {
      padding: 5px 0px;
      line-height: 18px;
      /*height: 100px;*/
    }
  }

  .window-bgimg {
    height: 100px;
    width: 100%;

    img {
      width: 100%;
      height: 100px;
    }
  }

  .other-info {
    margin-top: -5px;
    padding: 5px 10px;
    line-height: 18px;
    font-size: 13px;
  }

  //----------------------图例--------------
  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    /*box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);*/
    box-shadow: 0 0px 6px 0 rgba(114, 124, 245, 0.9);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }

  .bottom-example {
    width: 150px;
    border-radius: 0px;
    background: #020409;
    padding: 4px 10px;
    z-index: $zIndex2;
  }

  .bottom-example .input-item {
    height: 20px;
  }

  .bottom-example .input-item input {
    color: #00a7d2;
    vertical-align: middle;
  }

  .bottom-example .input-item .input-text {
    color: #00a7d2;
    padding-left: 3px;
    font-size: 12px;
  }

  .bottom-example .exampleList {
    margin-top: 4px;
    border-top: 1px solid #ddd;
  }

  .bottom-example .exampleList > div {
    position: relative;
  }

  .bottom-example .exampleList .exampleList-num {
    font-style: normal;
    position: absolute;
    right: 4px;
    color: #ffa000;
  }

  .bottom-example .exampleList div {
    display: flex;
    align-items: center;
    line-height: 20px;
    font-size: 12px;
  }

  .bottom-example .exampleList div img {
    width: 12px;
    height: 12px;
  }

  .bottom-example .exampleList div span {
    padding-left: 10px;
    color: #00a7d2;
  }

  .amap-toolbar {
    top: unset !important;
    bottom: 10px !important;
  }

  //----------------药店查询
  .shop-query {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 4px;
    z-index: $zIndex2;
    font-size: 12px;
  }

  .shop-query .list-input {
    display: flex;
    margin-top: 8px;
  }

  .shop-query .list-input .query-input input {
    width: 160px;
    display: inline-block;
    background: #fff;
    border-radius: 0px;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    font-size: 12px;
  }

  .shop-query .list-input .query-shop {
    border: 1px solid #ced4da;
    border-radius: 0px;
    display: inline-block;
    width: 50px;
    margin-left: -1px;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow: visible;
    text-transform: none;
    cursor: pointer;
    height: 36px;
    outline: none;
  }

  .shop-query .list-input .query-shop:hover {
    opacity: 0.8;
  }

  //-------------信息窗口-----------
  .amap-info-content {
    padding: 0 !important;
    overflow: unset;
  }

  .amap-info-close {
    color: #fff;
    margin-right: -10px;
    font-size: 22px;
  }

  .window-style-open {
    overflow: hidden;
    background: #fff;
    width: 300px;
    box-shadow: 0 5px 15px #000;
    padding: 1px;
  }

  .window-style-open .box-img {
    width: 100%;
    height: 150px;
    background: #dddddd;
  }

  .window-style-open .box-img img {
    width: 100%;
    height: 150px;
  }

  .window-style-open .box-info {
    background: #0e932e;
    padding: 5px 10px;
    font-size: 12px;
  }

  .window-style-open .box-info .info-title {
    line-height: 18px;
    font-weight: bold;
    color: #fff;
  }

  .window-style-open .box-info .info-title span {
    font-size: 13px;
  }

  .window-style-open .box-info .info-title a {
    color: #6fa9da;
    cursor: pointer;
  }

  //-------------- 文字提示 ---------
  .amap-marker-label {
    border: 1px solid #ddd !important;
    margin-top: 4px;
    color: #000;
    font-size: 13px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px;
    font-weight: bold;
    padding: 0px;
    position: relative;
    margin-top: 0px;
  }

  .amap-marker-label .title {
    padding: 4px 4px;
  }

  //行政区划
  .area-card {
    position: absolute;
    left: 1rem;
    right: 0;
    z-index: $zIndex2;
  }

  //统计信息
  .street-info-wrap {
    position: absolute;
    width: calc(100% - 456px);
    bottom: 1rem;
    left: 284px;
    display: flex;
    color: #fff;

    .info-title {
      padding: 4px 10px;
      font-size: 14px;
      font-weight: bold;
    }

    .info-num {
      text-align: center;
      line-height: 36px;
      font-size: 16px;
    }

    .el-col-20 {
      width: 20%;
    }

    .el-row {
      margin-bottom: 20px;
      width: 100%;
      margin-left: 0 !important;
      margin-right: 0 !important;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .el-col {
      border-radius: 4px;
    }

    .bg-purple-dark {
      background: #99a9bf;
    }

    .bg-purple {
      background: #afb3b6;
    }

    .bg-purple-light {
      background: #e5e9f2;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }

    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }

  //详情弹窗
  .el-dialog__body {
    padding: 0;
  }

  //刷新
  .refresh-btn {
    position: fixed;
    right: 1rem;
    bottom: 178px;
    background: #00bfa5;
  }

  .info {
    min-width: auto;
  }

  .year-box {
    margin-top: 8px;
    position: relative;
  }

  .switch-radius {
    position: absolute;
    top: 5px;
    right: 20px;
  }

  /* 左侧信息缩进显示 */
  .map-info-switch {
    width: 250px;
    background: #fff;
    height: calc(100% - 80px);
    position: fixed;
    top: 70px;
    left: 10px;
    z-index: 1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#00bfa5), to(#00796b));
    background-image: linear-gradient(-180deg, #00bfa5 0%, #00796b 100%);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    border-radius: 10px;

    .switch-position {
      position: relative;
      height: 100%;

      .right-img {
        position: absolute;
        right: 0px;
        top: 10px;
        background: #00bfa5;

        img {
          margin-right: -7px;
          width: 30px;
          height: 50px;
        }
      }

      .area-card {
        width: 250px;
        bottom: 0px;
        top: unset;
        left: 0px;
        background: transparent;
        box-shadow: none;
        border-top: 1px solid #999;

        h4 {
          color: #fff;
          margin-bottom: 0px;
        }
      }

      .shop-query {
        padding-top: 15px;
        position: unset;
        border-bottom: 1px solid #999;
        left: 0px;
        width: 250px;
        padding-bottom: 15px;
        padding-left: 15px;

        .input-item {
          border-radius: 5px;
          color: #495057;
        }

        .location {
          width: 166px;
          height: 30px;
          display: inline-block;
          margin-left: -3px;
          border-radius: 0px;
        }

        .year-btn {
          color: #495057;
          background-color: #e9ecef;
          border: 1px solid #ced4da;
          border-right: none;
        }

        .query-shop {
          color: #495057;
          background-color: #e9ecef;
          border: 1px solid #ced4da;
          border-left: none;
        }

        .year-select {
          /*width: 200px !important;*/
        }
      }

      .shop-list-box {
        height: calc(100% - 310px);
        padding: 0px;

        .title {
          padding: 5px 10px;
          color: #fff;
          font-size: 14px;
        }

        .shop-list-ul {
          height: calc(100% - -85px);
          padding: 0px;
          margin: 0px;
          overflow: auto;

          .shop-item {
            list-style: none;
            display: flex;
            padding: 5px 10px;
            align-items: center;
            cursor: pointer;

            .shop-img {
              width: 50px;
              height: 50px;
              /*border-radius: 10px;*/
              img {
                border: 1px solid #ddd;
                border-radius: 10px;
                width: 50px;
                height: 50px;
              }
            }

            .shop-info {
              width: 200px;
              padding-left: 5px;
              color: #fff;
            }
          }

          .shop-item:hover {
            background: rgba(0, 0, 0, .2);
          }
        }

        .shop-list-ul::-webkit-scrollbar { /*滚动条整体样式*/
          width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
          height: 1px;
        }

        .shop-list-ul::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          background: #008172;
        }

        .shop-list-ul::-webkit-scrollbar-track { /*滚动条里面轨道*/
          -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          background: #EDEDED;

        }
      }
    }
  }

  /* 区域面 道路 标记 样式*/
  .bottom-example {
    background: #008172;
    box-shadow: none;
    border-radius: 4px;

    .input-item .input-text {
      color: #fff;
    }

    .exampleList div span {
      color: #fff;
    }
  }

  .showLeftInfo {
    position: fixed;
    top: 80px;
    left: 24px;
    z-index: 2;
    color: #fff;
    transform: rotate(180deg);

    .showLeftInfo-img {
      cursor: pointer;
      margin-left: -7px;
    }

    .showLeftInfo-see {
      width: 27px;
      color: #008675;
      transform: rotate(180deg);
      display: inline-block;
      margin-top: 2px;
      position: fixed;
      top: -4px;
      left: 9px;
      z-index: 3;
    }
  }

  .showLeftInfo-box {
    position: absolute;
    top: -25px;
    right: -27px;
    color: #fff;
    font-size: 20px;
  }

  .showLeftInfo-box-img {
    cursor: pointer;
  }

  .exampleList-img {
    width: 12px;
    height: 12px;
  }

  .set-img-animate {
    cursor: pointer;
    animation: animateScale 0.8s infinite ease-in-out;
    -webkit-animation: animateScale 0.8s infinite ease-in-out;
  }

  .data-style {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#00bfa5), to(#00796b));
    background-image: linear-gradient(-180deg, #00bfa5 0%, #00796b 100%);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-top: -5px;
    cursor: pointer;
    user-select: none;
  }

  @keyframes animateScale {
    0% {
      transform: scale(1.1)
    }
    25% {
      transform: scale(1)
    }
    50% {
      transform: scale(0.9)
    }
    100% {
      transform: scale(1)
    }
  }

  @-webkit-keyframes animateScale {
    0% {
      transform: scale(1.1)
    }
    25% {
      transform: scale(1)
    }
    50% {
      transform: scale(0.9)
    }
    100% {
      transform: scale(1)
    }
  }
</style>
